<template>
    <!-- 普通支付订单 -->
    <div class="ordinaryOrder">
        <!-- 导航 -->
        <tz-breadcrumb  :pathArr='[{"name": "首页"},{"name": "网商银行列表", "url": "/internet-bank-list"}]'></tz-breadcrumb>
        <form class="form" autocomplete="off" @submit.prevent="onSubmit" action="https://www.baidu.com">
            <div class="form-item">
                <label for="">店铺编码</label>
                <el-input class="form-input" clearable v-model="store_code" size="medium"></el-input>
            </div>
            <div class="form-item">
                <label for="">网商银行入驻商户名称</label>
                <el-input class="form-input" clearable v-model="merchant_name" size="medium"></el-input>
            </div>
            <div class="form-item">
                <el-button type="primary" size='medium' native-type='submit'>搜索</el-button>
                <a href="javascript:;" style="color: #666;margin-left: 15px;" @click="showAdvance">高级搜索</a>
            </div>
            <el-collapse-transition>
              <div style="padding-top: 15px;" v-show="advancedSearch">
                <!-- <div class="form-item mb20">
                    <label for="">支付方式</label>
                    <el-select v-model="payType" placeholder="请选择" size="medium">
                      <el-option v-for="item in payTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </div>
                <div class="form-item mb20">
                    <label for="">订单状态</label>
                    <el-select v-model="orderStatus" placeholder="请选择" size="medium">
                      <el-option v-for="item in orderStatusOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                </div> -->
                <div class="form-item mb20">
                  <label for="">时间选择</label>
                  <el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change='timeChange'></el-date-picker>
                </div>
              </div>
            </el-collapse-transition>
        </form>
        <!-- table -->
        <el-table
          :data="tableData5"
          v-loading="loading"
          style="width: 100%"
          >
          <el-table-column
            prop="order_no"
            label="申请单号"
          >
          </el-table-column>
          <el-table-column
            prop="merchant_name"
            label="商户名称"
          >
          </el-table-column>
          <el-table-column label="商户类型">
            <template slot-scope="scope">
              <span>{{scope.row.merchant_type === '01'?'自然人':scope.row.merchant_type === '02'?'个体工商户':'企业商户'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="商户经营类型">
            <template slot-scope="scope">
              <span>{{scope.row.deal_type === '01'?'实体特约商户':scope.row.deal_type === '02'?'网络特约商户':'实体兼网络特约商户'}}</span>
            </template>
          </el-table-column>
          <el-table-column label="经营类目">
            <template slot-scope="scope">
              <span>{{scope.row.mcc | mcc_status}}</span>
            </template>
          </el-table-column>
          <el-table-column label="当天结算">
            <template slot-scope="scope">
              <span>{{scope.row.deal_support_prepayment === 'Y'?'支持':'不支持'}}</span>
            </template>
          </el-table-column>
           <!-- <el-table-column label="状态">
             <template slot-scope="scope">
              <el-switch v-model="scope.row.paywayStatus"
                :active-value="1"
                :inactive-value="0"
                active-color="#409EFF" 
                inactive-color="#ff4949"
                @change='changeSwitch(scope.row.id)'
                >
              </el-switch>
            </template>
          </el-table-column> -->
          <el-table-column label="交易时间" prop="created_at"></el-table-column>
          <el-table-column label="操作" width="300">
            <template slot-scope="scope">
              <el-button type="primary" plain  size="small" @click="internetBankDetails(scope.row.id,scope.row.store_code,scope.row.order_no)">详情</el-button>
              <el-button type="primary" plain  size="small" @click="internetBankEditor(scope.row.id,scope.row.store_code,scope.row.order_no)">编辑</el-button>
              <el-button type="primary" plain  size="small" @click="internetBankAddChidren(scope.row.id,scope.row.store_code,scope.row.order_no)">配置子商户</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="padding-top: 30px;background: #fff;">
          <el-pagination v-if="total > pageNum" class="text-center pager"
            @size-change="handleSizeChange"
            :current-page.sync="currentPage1"
            @current-change="handleCurrentChange"
            :page-size="pageNum"
            layout="total, prev, pager, next"
            :total="total">
          </el-pagination>
        </div>
    </div>
</template>

<script>
import api from './../../api/api';
import http from './../../config/index';
import { msToDate } from './../../controller/common';
import tzBreadcrumb from './../../components/breadcrumb/breadcrumb.vue';
export default {
  mounted: function () {
    // this.initdata();
    this.getData();
    console.log(this.total);
  },
  data: function () {
    return {
      currentPage1: 1,
      paywayStatus: '',
      // 店铺编码
      store_code: '',
      // 网商银行入驻商户名称
      merchant_name: '',
      // 时间组
      time: [],
      // 页码
      page: 1,
      // 显示的条数
      pageNum: 5,
      // 总条数
      total: 0,
      // 表格显示的内容
      tableData5: [],
      // 高级搜索内容是否显示
      advancedSearch: false,
      // 是否加载
      loading: false
    };
  },
  components: {
    'tz-breadcrumb': tzBreadcrumb
  },
  // 过滤器
  filters: {
    // 根据不同的状态改变不同类名，改变状态的颜色
    mcc_status (status) {
      var mccName = '';
      switch (status) {
        case '2015050700000000':
          mccName = '美食';
          break;
        case '2015091000052157':
          mccName = '超市便利店';
          break;
        case '2015062600004525':
          mccName = '休闲娱乐';
          break;
        case '2015062600002758':
          mccName = '购物';
          break;
        case '2016062900190124':
          mccName = '爱车';
          break;
        case '2015063000020189':
          mccName = '生活服务';
          break;
        case '2016042200000148':
          mccName = '教育培训';
          break;
        case '2016062900190296':
          mccName = '医疗健康';
          break;
        case '2015080600000001':
          mccName = '航旅';
          break;
        case '2016062900190337':
          mccName = '专业销售/批发';
          break;
        case '2016062900190371':
          mccName = '政府/社会组织';
          break;
        default:
          break;
      }
      return mccName;
    }
  },
  methods: {
    // changeSwitch (id) {
    //   // this[type][name] = this[type][name] === 0 ? 1 : 0;
    //   this.tableData5.forEach(e => {
    //     if (e.id === id) {
    //       console.log(e.paywayStatus);
    //       console.log(e.MerchantId);
    //       let that = this;
    //       // that.page = 1;
    //       // 商户入驻结果查询
    //       http.get(api.shoppinGunitQuery, {
    //         OrderNo: e.order_no
    //       }, response => {
    //         console.log(response);
    //         // 获取对应的MerchantId值
    //         // that.loading = false;
    //         // if (response.code === '10001') {
    //         //   this.$alert(response.data[0].RespInfo.ResultMsg, '', {
    //         //     confirmButtonText: '确定',
    //         //     callback: action => {
    //         //       // this.$message({
    //         //       //   type: 'info',
    //         //       //   message: `action: ${action}`
    //         //       // });
    //         //     }
    //         //   });
    //         // } else {
    //         //   that.$message.error(response.msg);
    //         // }
    //       }, () => {
    //         console.log('网络错误');
    //         that.$message.error('网络错误，请稍后再试');
    //       });
    //       if (e.paywayStatus === 1) {
    //         this.$prompt('请输入开启的原因', '', {
    //           confirmButtonText: '确定',
    //           cancelButtonText: '取消'
    //         }).then(({ value }) => {
    //           // 开启接口请求
    //           console.log(11);
    //           http.get(api.merchantUnfreeze, {
    //             MerchantId: e.MerchantId,
    //             UnfreezeReason: value
    //           }, response => {
    //             console.log(response);
    //             that.$message.success(response.msg);
    //           }, () => {
    //             console.log('网络错误');
    //             e.paywayStatus = 0;
    //           });
    //         }).catch(() => {
    //           this.$message({
    //             type: 'info',
    //             message: '你取消了开启'
    //           });
    //           e.paywayStatus = 0;
    //         });
    //       } else if (e.paywayStatus === 0) {
    //         console.log(22);
    //         this.$prompt('请输入关闭的原因', '', {
    //           confirmButtonText: '确定',
    //           cancelButtonText: '取消'
    //         }).then(({ value }) => {
    //           // 关闭接口请求
    //           http.get(api.merchantFreeze, {
    //             MerchantId: e.MerchantId,
    //             FreezeReason: value
    //           }, response => {
    //             console.log(response);
    //             that.$message.success(response.msg);
    //             // if (response.code === '10001') {
    //             //   that.total = response.data[0].total;
    //             //   that.tableData5 = response.data[0].result;
    //             // } else {
    //             //   that.$message.error(response.msg);
    //             // }
    //           }, () => {
    //             console.log('网络错误');
    //             e.paywayStatus = 1;
    //           });
    //         }).catch(() => {
    //           this.$message({
    //             type: 'info',
    //             message: '你取消了关闭'
    //           });
    //           e.paywayStatus = 1;
    //         });
    //       }
    //     }
    //   });
    // },
    timeChange (val) {
      // 日期空间确定时触发
      this.start_time = msToDate(val[0]);
      this.end_time = msToDate(val[1]);
    },
    // 搜索按钮
    onSubmit: function () {
      let that = this;
      that.page = 1;
      that.getData();
      console.log(that.currentPage1);
    },
    // 高级搜索点击事件
    showAdvance: function () {
      this.advancedSearch = !this.advancedSearch;
    },
    handleCurrentChange (val) {
      let that = this;
      that.page = val;
      that.getData();
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
    },
    getData () {
      let that = this;
      this.loading = true;
      http.get(api.getenterlist, {
        token: localStorage.getItem('token'),
        store_code: that.store_code,
        merchant_name: that.merchant_name,
        start_date: that.start_time,
        end_date: that.end_time,
        page: that.page,
        pagesize: that.pageNum
      }, response => {
        console.log(response);
        that.loading = false;
        if (response.code === '10001') {
          that.total = response.data[0].total;
          console.log(that.total);
          that.tableData5 = response.data[0].result;
        } else {
          that.$message.error(response.msg);
        }
      }, () => {
        console.log('网络错误');
        that.$message.error('网络错误，请稍后再试');
      });
    },
    // 订单详情
    internetBankDetails (id, storeCode, orderNo) {
      this.$router.push({
        path: '/internet-bank-list-details',
        query: {
          id: id,
          store_code: storeCode,
          order_no: orderNo
        }
      });
    },
    // 修改
    internetBankEditor (id, storeCode, orderNo) {
      this.$router.push({
        path: '/internet-bank-list-modify',
        query: {
          id: id,
          store_code: storeCode,
          order_no: orderNo
        }
      });
    },
    // 添加子商户
    internetBankAddChidren (id, storeCode, orderNo) {
      this.$router.push({
        path: '/internet-bank-add-children-merchant',
        query: {
          id: id,
          store_code: storeCode,
          order_no: orderNo
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.form
  padding: 2rem;
  margin-top: 15px;
  margin-bottom: 12px;
  box-sizing: border-box;
  background: #fff;
  box-shadow: 1px 1px 1px #999;
  .form-item
    display: inline-block;
    margin-right: 35px;

    label
      margin-right: 4rem;
      font-size: 14px;
      color: #333;

    .form-input
      max-width: 15rem;

  .line
    height: 4.5rem;

.demo-table-expand
  font-size: 0;

  label
    width: 90px;
    color: #99a9bf;

  .el-form-item
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
.mb20
  margin-bottom:20px
</style>
